<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT  } from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Img, ImgSystem } from '@eva/plugin-renderer-img'
	import { Render, RenderSystem } from '@eva/plugin-renderer-render'
	export default{
		name: 'EvajsStudyShowSortAndTransparency',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'heart',
						type: RESOURCE_TYPE.IMAGE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
							}
						},
						preload: true
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showSortAndTransparency()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showSortAndTransparency(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
							backgroundColor: 0x101010
						}),
						// 游戏精灵系统
						new ImgSystem(),
						new RenderSystem(),
					],
				});
				const container = new GameObject('container', {
					size: { width: 750, height: 1000 },
					position: {
						x: 0,
						y: 0
					}
				})
				// 上级容器必须开启排序功能
				container.addComponent(new Render({
					sortableChildren: true
				}))
				const image1 = new GameObject('image1', {
					size: { width: 200, height: 200 },
					position: {
						x: 0,
						y: 0
					}
				})
				image1.addComponent(new Img({
					resource: "heart"
				}))
				const image2 = new GameObject('image2', {
					size: { width: 200, height: 200 },
					position: {
						x: 50,
						y: 50
					}
				})
				image2.addComponent(new Img({
					resource: "heart"
				}))
				// 排序值越大放在越上面
				image1.addComponent(new Render({
					zIndex: 6
				}))
				image2.addComponent(new Render({
					zIndex: 7,
					alpha: 0.5
				}))
				// 游戏场景内放置游戏对象
				container.addChild(image1);
				container.addChild(image2);
				this.game.scene.addChild(container);

			}
		}
	}
</script>